<template>
  <div class="wrap">
    <TabBar />
    <Popup ref="exitRef" mask>
      <Pconfirm tip-text="确定退出登录吗？" @cancel="onExit" @confirm="exit" />
    </Popup>
    <Popup ref="GLaSignRef">
      <Pconfirm cancel-text="稍后签署" confirm-text="立即签署" tip-text="你有一份合作申请书需要签署，是否现在签署？" @cancel="GLaSignRefChange" @confirm="GLaSignRefSubmit" />
    </Popup>
    <!-- 修改头像 -->
    <ImageCropper ref="avatarRef" height="300" radius="150" width="300" @image="changeAvatar" />
    <!--    个人 企业信息-->
    <div class="card">
      <div class="card_bottom">
        <div class="avatar_box">
          <div :style="{background: avatarLoading ? '#4c4c4c' : autoBG(userAvatar)}" class="avatar" @tap.stop="updateAvatar" />
        </div>
        <div class="info">
          <div class="flex_start_cen">
            <div class="user_name textLineHidden">{{ zhiKeInfo.name }}</div>
            <div class="approve ml16">
              <Icon name="icon-yirenzheng1" size="24" />
              <div class="ml10">已认证</div>
            </div>
          </div>
          <div class="status_list">
            <div v-for="d in categoryList" :key="d" class="status flex_start_cen">
              <Icon :name="d.category === 0 ? 'icon-hezuoshang' : 'icon-jinpai'" :styles="{marginRight: '8rpx'}" size="26" />
              <div v-if="d.category === 0">合作商</div>
              <div v-else>{{ status(d?.level) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  操作-->
    <div class="handle_box">
      <template v-for="d in Identity1" :key="d.key">
        <div class="handle" @tap.stop="goView(d.key)">
          <div style="display: flex;align-items: center">
            <Icon :name="d?.ICON" size="36" />
            <div style="margin-left: 20rpx">{{ d.title }}</div>
            <div v-if="d.title === '合作协议' && (contractData?.personCompanyWaitSignCount>0 || contractData?.personWaitSignCount>0)" class="red_dot" />
          </div>
          <div v-if="d.title === '合作协议' && (contractData?.personCompanyWaitSignCount>0 || contractData?.personWaitSignCount>0)" class="red_dot" />
          <div style="display: flex;align-items: center">
            <Icon :name="d?.icon || 'icon-youjiantou'" :size="d?.iconSize || '40'" :styles="{opacity: 0.45, transform: `translateX(${d?.icon === 'icon-qiehuan' ? -6 : 0}px)`}" />
          </div>
        </div>
      </template>
    </div>
    <!-- 退出登录-->
    <div class="footer">
      <Button size="L" type="solid" @confirm="onExit">退出登录</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { autoBG, getReq, onShow, Router, storeCommit, storeState } from '@U/common'
import { clearToken } from '@U/Auth'
import Icon from '@C/Icon.vue'
import Button from '@C/Button.vue'
import Popup from '@C/Popup.vue'
import ImageCropper from '@C/ImageCropper.vue'
import { getChannelAgentInfo, getPerContractCounts } from '@P/User/request'
import Pconfirm from '@C/Pconfirm.vue'
import { IObjArray } from '@/interface'
// 个人账号 获取个人/工作室待签约数量
const contractData = ref(null)
const getPerContractCountsFn = async () => {
  const { data } = await getPerContractCounts().finally(() => {})
  contractData.value = data
}
const zhiKeInfo = computed(() => storeState.zhiKeInfo)
const userAvatar = computed(() => storeState.userAvatar)
onShow(() => {
  // 每次进入该页面初始化
  isFirst.value = true
  getIdentityInfo()
  // getGLaSign()
  // storeCommit('accountStatus', storeState.userType)
  // getPerContractCountsFn()
})
// 修改头像
const avatarRef = ref()
const avatarLoading = ref(false)
const updateAvatar = () => {
  avatarRef.value?.cropper()
}
const changeAvatar = async (newAvatar: string) => {
  if (newAvatar) {
    avatarLoading.value = true
    storeCommit('userAvatar', `${import.meta.env.VITE_SHOUDAO_IMG_URL}/${newAvatar}`)
    avatarLoading.value = false
  }
}
// 操作
const Identity1 = computed(() => [
  {
    key: 'credentials',
    title: '认证信息',
    ICON: 'icon-renzhengxinxi',
  },
  {
    key: 'hold_main_body',
    title: '持有主体',
    ICON: 'icon-chiyouzhuti',
  },
  {
    key: 'signList',
    title: '合作协议',
    ICON: 'icon-hezuoxieyitubiao',
  },
  {
    key: 'gl_myTeam',
    title: '我的团队',
    ICON: 'icon-wodetuandui',
  },
  {
    key: 'informList',
    title: '通知中心',
    ICON: 'icon-tongzhizhongxin',
  },
  // {
  //   key: 'ai_contract',
  //   title: 'AI合同',
  //   ICON: 'icon-aihetong',
  // },
  {
    title: '登录密码修改',
    key: 'pwdChange',
    ICON: 'icon-denglumimaxiugai',
  },
  // {
  //   title: '登录账号修改',
  //   key: 'phone_change',
  //   ICON: 'icon-dengluzhanghaoxiugai',
  // },
])

// GL 合作意向函
const GLaSignRef = ref()
const isFirst = ref(true)
const GLaSignRefSubmit = () => {
  GLaSignRefChange()
  if (isFirst.value) {
    isFirst.value = false
    setTimeout(() => Router.push('signList', {}), 300)
  }
}
const GLaSignRefChange = () => {
  GLaSignRef.value.change()
}

async function getGLaSign() {
    const { data } = await getReq('/api/popup/identity/info')
    if (data && data.needPop && data.type === 1 && data.state !== 2) {
      GLaSignRefChange()
    }
}

const categoryList = ref(<IObjArray>[])
// 获取GL等级
const getIdentityInfo = async () => {
  const { code, data: { typeAndSuperior } } = await getChannelAgentInfo().finally(() => {})
  if (code === 200) {
    categoryList.value = typeAndSuperior
  }
}
const status = (type:number) => {
  switch (type) {
    case 1: return '督导'
    case 2: return '银牌'
    case 3: return '金牌'
  }
}
// 去页面
const goView = (url: string) => {
  Router.push(url)
}

// 退出身份
const exitRef = ref()
const onExit = () => { exitRef.value.change() }
const exit = () => {
  clearToken()
  Router.reLaunch('login')
}
</script>

<style lang="less" scoped>
.wrap{
  padding:  16rpx 24rpx 28rpx;
  overflow-y: auto;
  .card {
    background: white;
    border-radius: 14rpx;
    .card_bottom {
      padding: 28rpx 28rpx 38rpx;
      display: flex;
      .avatar_box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-right: 20rpx;
        .avatar {
          width:140rpx;
          height: 140rpx;
          flex: 0 0 120rpx;
          padding-top: 64rpx;
        }
      }
      .info {
        flex: 1 1;
        font-size: 24rpx;
      }
      .user_name {
        font-size: 32rpx;
        color: #464646;
      }
      .approve {
        width: 160rpx;
        height: 40rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1890FF;
        border: 1px solid #1890FF;
      }
      .firm_name {
        font-size: 32rpx;
        font-weight: 700;
        color: #848484;
        margin: 10rpx 0;
      }
      .status_list {
        margin-top: 16rpx;
        .status {
          height: 28rpx;
          font-size: 24rpx;
          padding: 4rpx 0;
          border-radius: 14rpx;
        }
      }
    }

  }
  .handle_box {
    overflow: hidden;
    border-radius: 14rpx;
    background: white;
    margin-top: 16rpx
  }
  .handle {
    background: white;
    height: 120rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    justify-content: space-between;
    position: relative;
    .red_dot {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: #FF3B30;
      position: absolute;
      right: 120rpx;
    }
    &:last-child {
      border-bottom: none;
    }
  }
  .footer{
    margin: 16rpx 0 130rpx;
  }
  /deep/ .prm-button-box {
    border: none !important;
  }
}
</style>
